渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以产生了的一种解决方式在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。

先看一个例子，

transition { /*渐进增强写法*/
                            -webkit-transition: all .5s; /*Safari and Chrome*/
                               -moz-transition: all .5s;/*Firefox*/
                                 -o-transition: all .5s;/*Opera*/
                                    transition: all .5s;
                          }
                          transition { /*优雅降级写法*/
                                    transition: all .5s;
                                 -o-transition: all .5s;/*Opera*/
                               -moz-transition: all .5s;/*Firefox*/
                            -webkit-transition: all .5s;/*Safari and Chrome*/
                          }
                        

渐进增强（progressive enhancement）：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）

优雅降级（graceful degradation）：
一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，对版本较高的浏览器追加不同的功能